<!--
 * @Description: mustache 模板引擎
 * @Author: wangqi
 * @Date: 2021-05-03 16:55:46
 * @LastEditTime: 2021-05-19 22:16:11
-->

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Document</title>
</head>

<body>
  <div class="wrap">
    <h3 class="ul_title"></h3>
    <div class="uls"></div>
  </div>
</body>

<script type="text/template" id="arrObj">
  <ul>
        {{#liData}}
            {{#isShow}} 
                <li>
                    {{sname}} 的年龄：{{sage}},
                    爱好是: {{#hobbies}}  <span>{{.}},</span>  {{/hobbies}}
                </li>
            {{/isShow}}
        {{/liData}}
    </ul>
  </script>

<script type="module">
  import mustache from "./src/mustache.4.2.0.js";

    let wrap = document.querySelector(".wrap");
    let ul_title = document.querySelector(".ul_title");
    let uls = document.querySelector(".uls");

    // 标题内筒
    let titleData = {sname:"wangqi", title:"简单数据也要为对象"};
    let titleTmp = `<p>来自{{sname}}, &emsp;&emsp; 介绍：{{title}}</p>`;    
    let titleStr = mustache.render(titleTmp, titleData);
    ul_title.innerHTML = titleStr;

    // 列表内容
    let ulTmp = document.querySelector("#arrObj").innerHTML;
    let mustacheData = {
      liData: [
        { sname: "小明", sage: "11", hobbies: ["唱歌", "跳舞", "打篮球"] , isShow: true},
        { sname: "小红", sage: "12", hobbies: ["计算机", "体育"], isShow: true},
        { sname: "小李", sage: "13", hobbies: ["口琴"] , isShow: false},
      ],
    };
    let ulStr = mustache.render(ulTmp, mustacheData);
    uls.innerHTML = ulStr;

    wrap.appendChild(ul_title);
    wrap.appendChild(uls);
  </script>

</html>